<template>
	<uv-navbar placeholder title="售后详情" @leftClick="leftClick" />
	<div class="payment-success-container">
		<div class="success-content">
			<div class="success-icon"></div>
			<h1 class="success-title">提交成功</h1>
			<p class="success-message">商家收到退货后会第一时间给您退款哦</p>
		</div>
	</div>
</template>

<script setup>
	const leftClick = () => {
		const pages = getCurrentPages();
		if (pages.length >= 3) { // 确保有足够的页面可以回退
			uni.navigateBack({
				delta: 2
			});
		} else {
			uni.navigateBack()
		}
	}
</script>

<style scoped>
	.payment-success-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
		padding: 20px;
		position: relative;
	}

	/* 顶部浅灰色细线 */
	.payment-success-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background-color: #f0f0f0;
	}

	.success-content {
		text-align: center;
		max-width: 400px;
		width: 100%;
	}

	.success-icon {
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		background-color: #4CAF50;
		border-radius: 50%;
		position: relative;
	}

	/* 使用CSS绘制对勾 */
	.success-icon::before {
		content: '';
		position: absolute;
		width: 24px;
		height: 12px;
		border-left: 4px solid white;
		border-bottom: 4px solid white;
		transform: rotate(-45deg);
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -8px;
	}

	.success-title {
		font-size: 24px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.success-message {
		font-size: 16px;
		color: #999;
		line-height: 1.5;
	}
	
	.op {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
</style>